<template>
<div>
  <Form ref="form">
    <FormItem style="padding:5px;">
      <Upload
        class=""
        :drag="Plus"
        action="/api/videoUpload"
        multiple
        :show-file-list="false"
        :headers="{Authorization:token}"
        :on-success="handleVideoSuccess"
        :before-upload="beforeUploadVideo"
        :data="{introduce: this.introduce,videoType:this.videoType }"
      >
        <div v-if="Plus" style="width: 200px;height:200px;border:1px dashed blue;">
          <Icon type="ios-add" size="60" style="margin-top:70px;margin-left:70px;"></Icon>
          <div style="margin-left:20px;font-size:10px;">将文件拖到此处或点击上传</div>
        </div>
        <div style="color:red;">
          只能上传mp4/flv/avi文件，且不超过300M
        </div>

        <!--              <Progress-->
        <!--                v-if="videoFlag == true"-->
        <!--                type="circle"-->
        <!--                :percentage="videoUploadPercent"-->
        <!--                style="margin-top: 30px"-->
        <!--              ></Progress>-->

      </Upload>
    </FormItem>
  </Form>
</div>
</template>

<script>
export default {
  name: "upVideo",
  data(){
    return{
      Plus: true,
      token:'',
      videoType:'',
      introduce:'',
    }
  },
  methods:{
    // 视频上传前执行
    beforeUploadVideo (file) {
      this.file = file
      //文件大小
      const isLt300M = file.size / 1024 / 1024 < 300
      //视频后缀检查
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
        this.$Message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt300M) {
        this.$Message.error('上传视频大小不能超过300MB哦!')
        return false
      }
    },
    // 视频上传成功是执行
    handleVideoSuccess (res, file) {
      console.log(res)
      // 如果为200代表视频保存成功
      if (res.code === 200) {
        this.$Message.success('视频上传成功！')
        this.uploadHidden = true
      } else {
        this.$Message.error('视频上传失败，请重新上传！')
      }
    },
  },
  created(){
    this.token = sessionStorage.getItem('token')
  }
}
</script>

<style scoped>

</style>
